<template>
	<view class="content" >
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="工人信息采集">
        </u-navbar>

        <view class="u-m-t-30 u-m-b-30 u-flex u-row-center">
            <u-icon class="u-m-r-10" name="error-circle" color="#f0ad4e"></u-icon>
            <text class="u-font-26 uni-dec-color">请将采集信息输入下方框中</text>
        </view>

        <!-- 其它信息 -->
        <view class="uni-area">
            <uni-item-base-plus class="u-m-t-50" :baseData="contractInfo" @confirmSelect="confirmSelect" @inputChange="inputChange" @confirmDate="confirmDate" />
            <uni-item-base-plus class="u-m-t-50" :baseData="paycardInfo" @confirmSelect="confirmSelect" @inputChange="inputChange" @confirmDate="confirmDate" @camera="camera"/>
            <uni-item-base-plus class="u-m-t-50" :baseData="otherInfo" @confirmSelect="confirmSelect" @inputChange="inputChange" @confirmDate="confirmDate" />
        </view>

        <!-- 下一步 -->
        <view class="next-box u-flex u-flex-col u-row-center">
            <u-button class="pre" shape="circle" text="上一步" @tap="back"></u-button>
            <u-button class="next u-m-t-50" type="primary" shape="circle" text="下一步" @tap="next"></u-button>
        </view>
	</view>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
import { pathToBase64 } from 'image-tools';
export default {
    data() {
        return {
            // 合同信息
            contractInfo:{
                type: 'contractInfo',
                line: false,
                title: '合同信息',
                rightText: '',
                list:[
                    { show: true, required:true, field:'sflwht', zdv:'shifou', title:'是否签署合同', val:'', value:'',type:'select', pla:'请选择是否签署合同',data:[]},
                    { show: true, required:true, field:'htlx', zdv:'htlx', title:'合同类型', val:'', value:'', type:'select', pla:'请选择合同类型',data:[]},
                    { show: true, required:true, field:'htqdsj', zdv:'', title:'合同签订时间', val:'', value:this.$moment().format('YYYY-MM-DD'), type:'date', pla:'请选择合同签订时间',data:[]},
                    { show: true, required:true, field:'htqssj', zdv:'', title:'合同起始时间', val:'', value:this.$moment().format('YYYY-MM-DD'), type:'date', pla:'请选择合同起始时间',data:[]},
                    { show: true, required:true, field:'htzzsj', zdv:'', title:'合同终止时间', val:'', value:'', type:'date', pla:'请选择合同终止时间',data:[]},
                    { show: true, required:true, field:'lwhtbh', zdv:'', title:'合同编号', val:'', value:'', type:'input', pla:'请输入合同编号',data:[]},
                    { show: true, required:true, field:'gzjsfs', zdv:'jxfs', title:'工资计算方式', val:'', value:'', type:'select', pla:'请选择工资计算方式',data:[]},
                    { show: true, required:true, field:'gzbz', zdv:'', title:'工资标准', val:'', value:'', type:'input', pla:'请输入工资标准',data:[]},
                    { show: true, required:true, field:'gzzfrq', zdv:'', title:'工资支付日期', val:'', value:'', type:'date', pla:'请选择合同中约定日期',data:[]},
                ]
            },
            // 工资卡信息
            paycardInfo:{
                type: 'paycardInfo',
                line: false,
                title: '工资卡信息',
                rightText: '',
                list:[
                    { show:true, required:true, field:'gzklb', zdv:'gzklb', title:'工资卡类别', val:'', value:'',type:'select', pla:'请选择工资卡类别',data:[] },
                    { show:true, required:true, field:'khhyh', zdv:'jyjgbm', title:'工资卡开户银行', val:'', value:'', type:'select', pla:'请选择工资卡开户银行',data:[] },
                    { show:true, required:true, field:'khhdm', zdv:'', title:'开户行行号', val:'', value:'',type:'input', pla:'请输入开户行行号',data:[] },
                    { show:true, required:true, field:'gzkkh', zdv:'', title:'工资卡号', val:'', value:'',type:'input', pla:'请输入工资卡号',data:[] },
                    { show:false, required:true, field:'sbkkh', zdv:'', title:'社保卡号', val:'', value:'',type:'input', pla:'请输入社保卡号',data:[] },
                ]
            },
            // 其它信息
            otherInfo:{
                type: 'otherInfo',
                line: false,
                title: '其它信息',
                rightText: '',
                list:[
                    { show:true, required:false, field:'sfcjjbaqpx', zdv:'shifou', title:'是否参加基本安全培训', val:'', value:'',type:'select', pla:'是否参加基本安全培训',data:[] },
                    { show:true, required:false, field:'zcgwzs', zdv:'', title:'职称/岗位证书', val:'', value:'', type:'input', pla:'请输入职称/岗位证书' },
                    { show:true, required:false, field:'jnspdj', zdv:'', title:'技能水平/等级', val:'', value:'',type:'input', pla:'请输入技能水平/等级' },
                    { show:true, required:false, field:'hyzk', zdv:'hyzk-cxcj', title:'婚姻状况', val:'', value:'',type:'select', pla:'婚姻状况',data:[] },
                    { show:true, required:false, field:'zzmm', zdv:'zzmm', title:'政治面貌', val:'', value:'',type:'select', pla:'政治面貌',data:[] },
                    { show:true, required:false, field:'sfjrgh', zdv:'shifou', title:'是否加入工会', val:'', value:'',type:'select', pla:'是否加入工会',data:[] },
                    { show:false, required:true, field:'jrghsj', zdv:'', title:'加入工会时间', val:'', value:'', type:'date', pla: '请选择加入工会时间' },
                    { show:true, required:false, field:'sfyzdjbs', zdv:'shifou', title:'是否有重大疾病史', val:'', value:'',type:'select', pla:'是否有重大疾病史',data:[] },
                    { show:true, required:false, field:'jjlxrxm', zdv:'', title:'紧急联系人姓名', val:'', value:'',type:'input', pla:'请输入紧急联系人姓名' },
                    { show:true, required:false, field:'jjlxdh', zdv:'', title:'紧急联系人电话', val:'', value:'',type:'input', pla:'请输入紧急联系人电话' },
                ]
            }
        }
    },

    computed: {
        ...mapGetters(['autonymSubmitData']),
    },

    onReady(){},

    onLoad() {
        // 回填数据
        if( this.autonymSubmitData.id ){
            const types = ['contractInfo','paycardInfo','otherInfo']
            // 处理是否参加基本安全培训数据格式
            if( this.autonymSubmitData.sfcjjbaqpx ){
                this.setAutonymSubmitData({ sfcjjbaqpx: '1' })
            }else{
                this.setAutonymSubmitData({ sfcjjbaqpx: '0' })
            }
            const data = this.autonymSubmitData
            types.map((a,b)=>{
                this[a].list.map((v,i)=>{
                    if( v.type != 'select' ) v.value = data[v.field]
                })
            })
            // 没有签署合同
            if( this.autonymSubmitData.sflwht == 0 ){ 
                this.contractInfo.list.map((v,i)=>{
                    if( i != 0 ) v.show = false
                })
            }
            // 工资卡类别
            if( this.autonymSubmitData.gzklb == 1 ){ // 社会保障卡
                this.paycardInfo.list.map((v,i)=>{
                    if( v.field=='khhyh' || v.field=='khhdm' || v.field=='gzkkh' ) v.show = false
                    if( v.field=='sbkkh' ) v.show = true
                })
            }else if(this.autonymSubmitData.gzklb == 2){ // 银行卡
                this.paycardInfo.list.map((v,i)=>{
                    if( v.field=='khhyh'|| v.field=='khhdm' || v.field=='gzkkh' ) v.show = true
                    if( v.field=='sbkkh' ) v.show = false
                })
            }else{ // 其它
                this.paycardInfo.list.map((v,i)=>{
                    if( i!= 0 ) v.show = false
                })
            }
            // 加入了工会
            if( this.autonymSubmitData.sfjrgh == 1 ) {
                let a = this.otherInfo.list.filter(e=>{ return e.field == 'jrghsj' })
                a[0].show = true
            }
        }
        // 获取下拉选择数据
        this.getSelectData()
    },

    methods: {
        ...mapMutations(['setAutonymSubmitData']),

        // 返回
        back(){
            uni.navigateBack()
        },


        // 下拉选择数据
        getSelectData(){
            // 新增时缓存默认数据
            if( !this.autonymSubmitData.id ) this.saveDefaultData()
            const arr = []
            this.contractInfo.list.map((v,i)=>{
                if( v.type == 'select' ) arr.push({ type:'contractInfo', field:v.field, title:v.title, zdv: v.zdv, index: i })
            })
            this.paycardInfo.list.map((v,i)=>{
                if( v.type == 'select' ) arr.push({ type:'paycardInfo', field:v.field, title:v.title, zdv: v.zdv, index: i })
            })
            this.otherInfo.list.map((v,i)=>{
                if( v.type == 'select' ) arr.push({ type:'otherInfo', field:v.field, title:v.title, zdv: v.zdv, index: i })
            })
            arr.map((v,i)=>{
                let api = JSON.parse(JSON.stringify(this.$apis.CommonDictionaries))
                api.url += v.zdv
                this.$request(this,api,{}).then(res=>{
                    // console.log(v.title,res)
                    this[v.type].list[v.index].data = []
                    // 工资卡开户银行
                    if( v.field == 'khhyh' && !this.autonymSubmitData.id ) this[v.type].list[v.index].data1 = res
                    res.map((c,d)=>{
                        this[v.type].list[v.index].data.push({
                            type: v.type,
                            field: v.field,
                            label: c.dictLabel,
                            value: c.dictValue,
                            index: v.index
                        })
                    })
                    // 修改时回填下拉选择框的默认值
                    if( this.autonymSubmitData.id ){
                        let a = res.filter(e=>{ return e.dictValue == this.autonymSubmitData[v.field] })
                        try {
                            this[v.type].list[v.index].value = a[0].dictLabel
                        } catch (error) {
                            console.log(v.title+'无数据')
                        }
                    }else{
                        // 渲染需要有默认值的picker
                        if( v.field == 'sflwht' ){ // 是否签署合同
                            this[v.type].list[v.index].value = res[0].dictLabel
                            this[v.type].list[v.index].val = res[0].dictValue
                        }
                        if( v.field == 'gzklb' ){ // 工资卡类别
                            let gzklbIndex = 0 
                            res.map((v,i)=>{
                                if( v.dictValue == 1 || v.dictLabel == '银行卡' ) gzklbIndex = i
                            })
                            this[v.type].list[v.index].value = res[gzklbIndex].dictLabel
                            this[v.type].list[v.index].val = res[gzklbIndex].dictValue
                        }
                        if( v.field == 'sfcjjbaqpx' || v.field == 'sfjrgh' || v.field == 'sfyzdjbs' ){ // 是否参加基本安全培训、是否加入工会、是否有重大疾病史
                            this[v.type].list[v.index].value = res[1].dictLabel
                            this[v.type].list[v.index].val = res[1].dictValue
                        }
                        // 缓存默认数据
                        this.setAutonymSubmitData({ [v.field]:this[v.type].list[v.index].val})
                    }
                }).then()
            })
        },

        // 保存默认数据
        saveDefaultData(){
            const types = ['contractInfo','paycardInfo','otherInfo']
            types.map((a,b)=>{
                const obj = {}
                this[a].list.map((v,i)=>{
                    if( v.type == 'select' ){
                        obj[v.field] = v.val
                    }else{ 
                        obj[v.field] = v.value
                    }
                })
                this.setAutonymSubmitData(obj)
            })
        },


        // 下拉选择确认
        confirmSelect(e){
            // 是否签署合同
            if( e.field == 'sflwht' ){
                if( e.value == 1 ){ // 是
                    this[e.type].list.map((a,b)=>{
                        if( b!=0 ) a.show = true
                    })
                }else{ // 否
                    this[e.type].list.map((a,b)=>{
                        if( b!=0) a.show = false
                    })
                }
            }
            // 工资卡类别
            if( e.field == 'gzklb' ){
                if( e.value == 1 || e.label == '社会保障卡' ){
                    this[e.type].list.map((v,i)=>{
                        if( v.field=='khhyh' || v.field=='khhdm' || v.field=='gzkkh' ) v.show = false
                        if( v.field=='sbkkh' ) v.show = true
                    })
                }else if(e.value == 2 || e.label == '银行卡' ){
                    this[e.type].list.map((v,i)=>{
                        if( v.field=='khhyh'|| v.field=='khhdm' || v.field=='gzkkh' ) v.show = true
                        if( v.field=='sbkkh' ) v.show = false
                    })
                }else{
                    this[e.type].list.map((v,i)=>{
                        if( v.field=='khhyh'|| v.field=='khhdm' || v.field=='gzkkh' || v.field=='sbkkh' ) v.show = false
                    })
                }
            }
            // 工资卡开户银行
            if( e.field == 'khhyh' ){
                let a = this[e.type].list[e.index].data1.filter(ee=>{ return e.value == ee.dictValue })
                this[e.type].list[e.index+1].value = a[0].remark
                this.setAutonymSubmitData({ khhdm: a[0].remark }) // 开户行行号
            }
            // 是否加入工会
            if( e.field == 'sfjrgh' ){  
                if( e.value == 1 ){ // 是
                    this[e.type].list[e.index+1].show = true
                }else{ // 否
                    this[e.type].list[e.index+1].show = false
                }
            }
            // 视图赋值(这里虽然是下拉选择框,视图显示还是文本值)
            this[e.type].list.map((v,i)=>{
                if( v.field == e.field ) v.value = e.label
            }) 
            // 缓存picker选择的值(这里是下拉选择框,直接缓存字典值)
            this.setAutonymSubmitData({ [e.field]: e.value })
        },



        // 时间按选择确认
        confirmDate(e){
            this[e.type].list.map((v,i)=>{
                if( v.field == e.field ) v.value = this.$moment(new Date(e.value)).format('YYYY-MM-DD')
            })
            this.setAutonymSubmitData({ [e.field]: this.$moment(new Date(e.value)).format('YYYY-MM-DD') })
        },
        // 输入事件
        inputChange(e){
            this[e.type].list.map((v,i)=>{
                if( v.field == e.field ) v.value = e.value
            })
            this.setAutonymSubmitData({ [e.field]: e.value })
        },

        // 银行卡识别
        camera(){
            uni.chooseImage({
                count: 1, 
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album','camera'], //从相册选择
                success: res=>{
                    uni.showLoading({ title:'图片格式转换中'})
                    this.imgToBase64(res.tempFilePaths[0]).then(base64=>{
                        this.getOCRsignature(base64)
                    })
                }
            });
        },
        imgToBase64(data){
            return new Promise((resolve,reject)=>{
                pathToBase64(data).then(base64 => {
                    resolve(base64)
                }).catch(error => {
                    console.error(error)
                    reject(error)
                })		
            })			
        },
        getOCRsignature(ImageBase64){
            const _this = this
            this.$request(this,this.$apis.ocrSignature,{ImageBase64:ImageBase64}).then(res=>{
                // console.log('签名',res)
                uni.showLoading({ title:'卡号提取中' })
                uni.request({
                    url: 'https://ocr.tencentcloudapi.com',
                    method: 'POST',
                    data:{
                        ImageBase64: ImageBase64
                    },
                    header: {
                        'X-TC-Action': 'BankCardOCR',
                        'X-TC-Version': '2018-11-19',
                        'X-TC-Region': 'ap-beijing',
                        'X-TC-Timestamp': res.timestamp,
                        'Content-Type': 'application/json; charset=utf-8',
                        'Authorization': res.data,
                    },
                    success: e => {
                        uni.hideLoading()
                        if( e.data.Response.Error ){
                            uni.$u.toast(e.data.Response.Error.Message)
                        }else{
                            const result = e.data.Response
                            _this.paycardInfo.list[3].value = result.CardNo
                            _this.setAutonymSubmitData({gzkkh:result.CardNo})
                        }
                    },
                    fail: e => {
                        uni.hideLoading()
                        uni.$u.toast('卡号提取失败')
                    }
                });
            }).then()
        },


        // 下一步
        next(){
            // 处理是否参加基本安全培训的数据格式
            if( this.autonymSubmitData.sfcjjbaqpx == 1 ){
                this.setAutonymSubmitData({ sfcjjbaqpx: true })
            }else{
                this.setAutonymSubmitData({ sfcjjbaqpx: false })
            }
            // console.log('当前提交数据',this.autonymSubmitData)
            if( this.autonymSubmitData.sflwht == 1 ){ // 签署了合同
                const arr = [
                    { field:'htlx',title:'合同类型' },
                    { field:'htqdsj',title:'合同签订时间' },
                    { field:'htqssj',title:'合同起始时间' },
                    { field:'htzzsj',title:'合同终止时间' },
                    { field:'lwhtbh',title:'合同编号' },
                    { field:'gzjsfs',title:'工资计算方式' },
                    { field:'gzbz',title:'工资标准' },
                    { field:'gzzfrq',title:'工资支付日期' }
                ]
                for( let i=0; i<arr.length; i++ ){
                    if( !this.autonymSubmitData[arr[i].field] ){
                        uni.$u.toast( arr[i].title+'为必填项' )
                        return false
                    }
                }
            }
            if( this.autonymSubmitData.gzklb == 1 ){ // 工资卡类别---社会保障卡
                if( !this.autonymSubmitData.sbkkh){
                    uni.$u.toast('社会保障卡号为必填项')
                    return false
                }
            }
            if( this.autonymSubmitData.gzklb == 2 ){ // 工资卡类别---银行卡
                if( !this.autonymSubmitData.khhdm){
                    uni.$u.toast('开户行行号为必填项')
                    return false
                }
                if( !this.autonymSubmitData.gzkkh){
                    uni.$u.toast('工资卡号为必填项')
                    return false
                }
            }
            if( this.autonymSubmitData.sfjrgh == 1 ){ // 加入了工会
                if( !this.autonymSubmitData.jrghsj ){
                    uni.$u.toast('加入工会时间为必填项')
                    return false
                }
            }
            if( this.autonymSubmitData.jjlxdh ){ // 如果填写了紧急联系电话则要验证电话格式
                if (!(/^1[3456789]\d{9}$/.test(this.autonymSubmitData.jjlxdh))) {
                    uni.$u.toast('紧急联系电话有误,请重新填写')
                    return false
                }
            }
            // if( this.autonymSubmitData.cyyx ){ // 如果输入了邮箱则要验证邮箱格式
            //     if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.autonymSubmitData.cyyx)) {
            //         uni.$u.toast('邮箱格式有误,请重新填写')
            //         return false
            //     }
            // }
            uni.navigateTo({ url: '/pages/certification-bag/info-collect3' })
        }
    }
}
</script>

<style scoped lang="scss">
    .content{
        background: $uni-text-color-inverse;
        .next-box{
            padding: 116rpx 0 70rpx;
            .pre,.next{
                width: 500rpx;
                margin: 0;
            }
            .pre{
                background: #F6F7F8;
                border: none;
                /deep/.u-button__text{
                    color: #ADB4BD !important;
                }
            }
        }
    }
</style>
